<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getCarDetail } from "@/api/car";
import { showToast } from "vant";

const route = useRoute();
const router = useRouter();
const carDetail = ref(null);
const loading = ref(true);

// 获取车辆详情
const fetchCarDetail = async () => {
  try {
    console.log("正在获取车辆详情，ID:", route.params.id);
    const response = await getCarDetail(route.params.id);
    carDetail.value = response; // 直接使用响应数据
  } catch (error) {
    console.error("获取车辆详情失败:", error);
    showToast("获取车辆信息失败");
  } finally {
    loading.value = false;
  }
};

// 跳转到订单确认页
const goToOrderConfirm = () => {
  router.push({
    path: "/order-confirm",
    query: {
      carId: carDetail.value._id,
      pickupDate: route.query.pickupDate,
      returnDate: route.query.returnDate,
      city: route.query.city,
      returnCity: route.query.returnCity,
    },
  });
};

onMounted(() => {
  fetchCarDetail();
});
</script>

<template>
  <div class="car-detail">
    <van-nav-bar
      title="车辆详情"
      left-arrow
      @click-left="router.back()"
      fixed
      placeholder
    />

    <van-loading v-if="loading" class="loading" />

    <template v-else-if="carDetail">
      <!-- 车辆图片轮播 -->
      <div class="swipe-container">
        <van-swipe class="swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item v-for="image in carDetail.images" :key="image">
            <img :src="image" class="swipe-img" />
          </van-swipe-item>
        </van-swipe>
        <div class="swipe-info">
          <span class="car-status" :class="carDetail.status">{{
            carDetail.status
          }}</span>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="info-section">
        <div class="header">
          <div class="title">
            <h2>{{ carDetail.brand }} {{ carDetail.model }}</h2>
            <span class="type-tag">{{ carDetail.type }}</span>
            <span class="level-tag">{{ carDetail.level }}</span>
          </div>
          <div class="price">
            <span class="amount">¥{{ carDetail.dailyRate }}</span>
            <span class="unit">/天</span>
          </div>
        </div>

        <div class="description">{{ carDetail.description }}</div>

        <!-- 车辆规格 -->
        <div class="section">
          <h3>基本参数</h3>
          <div class="specs-grid">
            <div class="spec-item">
              <van-icon name="user-o" />
              <span>{{ carDetail.specifications.seats }}座</span>
            </div>
            <div class="spec-item">
              <van-icon name="guide-o" />
              <span>{{ carDetail.specifications.powerType }}</span>
            </div>
            <div class="spec-item">
              <van-icon name="logistics" />
              <span>{{ carDetail.specifications.trunkCapacity }}L</span>
            </div>
            <div class="spec-item">
              <van-icon name="fire-o" />
              <span>{{ carDetail.specifications.fuelConsumption }}L/100km</span>
            </div>
          </div>
        </div>

        <!-- 车辆尺寸 -->
        <div class="section">
          <h3>车辆尺寸</h3>
          <div class="dimension-info">
            <div class="dimension-item">
              <span class="label">长度</span>
              <span class="value">{{ carDetail.specifications.length }}mm</span>
            </div>
            <div class="dimension-item">
              <span class="label">宽度</span>
              <span class="value">{{ carDetail.specifications.width }}mm</span>
            </div>
            <div class="dimension-item">
              <span class="label">高度</span>
              <span class="value">{{ carDetail.specifications.height }}mm</span>
            </div>
          </div>
        </div>

        <!-- 取还车信息 -->
        <div class="section">
          <h3>取还车信息</h3>
          <div class="location-info">
            <van-cell
              title="取车地点"
              :value="carDetail.location"
              icon="location-o"
            />
            <van-cell title="可还车城市" icon="aim">
              <template #value>
                <div class="return-cities">
                  <van-tag
                    v-for="city in carDetail.returnCities"
                    :key="city"
                    plain
                    type="primary"
                    class="city-tag"
                  >
                    {{ city }}
                  </van-tag>
                </div>
              </template>
            </van-cell>
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="bottom-bar">
        <div class="price-info">
          <span class="daily-rate">¥{{ carDetail.dailyRate }}</span>
          <span class="rate-unit">/天</span>
        </div>
        <van-button
          type="primary"
          block
          @click="goToOrderConfirm"
          :disabled="carDetail.status !== '可租'"
          class="order-button"
        >
          {{ carDetail.status === "可租" ? "立即预订" : carDetail.status }}
        </van-button>
      </div>
    </template>

    <van-empty v-else description="未找到车辆信息" />
  </div>
</template>

<style scoped lang="scss">
.car-detail {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 80px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.swipe-container {
  position: relative;

  .swipe {
    height: 240px;

    &-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .swipe-info {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;

    .car-status {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);

      &.可租 {
        background: #07c160;
      }

      &.已租 {
        background: #ff976a;
      }

      &.维修中 {
        background: #969799;
      }
    }
  }
}

.info-section {
  background: #fff;
  margin: 12px;
  border-radius: 12px;
  overflow: hidden;

  .header {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
      }

      .type-tag,
      .level-tag {
        margin-left: 8px;
        padding: 2px 6px;
        font-size: 12px;
        border-radius: 4px;
      }

      .type-tag {
        color: #1989fa;
        background: rgba(25, 137, 250, 0.1);
      }

      .level-tag {
        color: #ff976a;
        background: rgba(255, 151, 106, 0.1);
      }
    }

    .price {
      .amount {
        font-size: 24px;
        font-weight: bold;
        color: #f44336;
      }

      .unit {
        font-size: 14px;
        color: #999;
        margin-left: 4px;
      }
    }
  }

  .description {
    padding: 12px 16px;
    font-size: 14px;
    color: #666;
    background: #f8f8f8;
    margin: 0 16px;
    border-radius: 8px;
  }
}

.section {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;

  h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
  }
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  .spec-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;

    .van-icon {
      font-size: 20px;
      margin-right: 8px;
      color: #1989fa;
    }

    span {
      font-size: 14px;
      color: #333;
    }
  }
}

.dimension-info {
  display: flex;
  justify-content: space-between;

  .dimension-item {
    text-align: center;
    flex: 1;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 0 4px;

    .label {
      display: block;
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .value {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }
}

.return-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .city-tag {
    margin-right: 8px;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .price-info {
    .daily-rate {
      font-size: 20px;
      font-weight: bold;
      color: #f44336;
    }

    .rate-unit {
      font-size: 14px;
      color: #999;
    }
  }

  .order-button {
    width: 120px;
    border-radius: 8px;
  }
}

// 暗黑模式适配
@media (prefers-color-scheme: dark) {
  .info-section {
    background: #1c1c1e;

    .header {
      border-bottom-color: #2c2c2e;
    }

    .description {
      background: #2c2c2e;
    }
  }

  .section {
    border-bottom-color: #2c2c2e;
  }

  .specs-grid .spec-item,
  .dimension-info .dimension-item {
    background: #2c2c2e;
  }

  .bottom-bar {
    background: #1c1c1e;
  }
}
</style> 